<template>
	<view class="container">
		<image src="../../static/loginBg.png" class="bgImg"></image>
		<view class="loginBox">
			<image src="../../static/k.png" class="loginImg"></image>
			<view class="tabsBox">
				<view class="tabs">
				      <view
				        v-for="(item, index) in tabs"
				        :key="index"
				        class="tab-item"
				        :class="{ 'active': activeIndex === index }"
				        @tap="switchTab(index)"
				      >
				        {{ item }}
				      </view>
				</view>
				<view class="content">
				  <!-- 这里根据activeIndex展示对应的内容 -->
				  <view v-if="activeIndex === 0">
						<view class="userLogin">
							<view class="userName">
								<input type="type" placeholder-class="custom-placeholder" placeholder="请输入手机号" v-model="phonenumber" />
							</view>
							<view class="register" @click="handleRegister">还没有账号？立即注册</view>
							<button @click="handleLogin" class="login">登录</button>
						</view>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { login } from '@/api/login.js'
	export default {
	  data() {
	    return {
	      tabs: ['账号密码登录'],
	      activeIndex: 0, // 当前激活的tab索引
		  // 验证码登录
		  phonenumber: '18294219190',
	    };
	  },
	  methods: {
	    switchTab(index) {
	      this.activeIndex = index;
	    },
		
		// 手机号验证码登录
		handleLogin() {
			// 调用登录接口
			let data = {
				"phonenumber":this.phonenumber,
			}
			login(data).then((res) => {
				if(res.code==200){
					uni.showToast({
						title: '登录成功',
						icon: 'success',
					});
					uni.switchTab({
					  url: '/pages/index/index',
					});
				}
			  })
			
		},
		    
			handleRegister(){
				uni.navigateTo({
				  url: '/pages/login/register',
				  });
			},
	  },
	};
</script>

<style>
	.bgImg{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	
	.loginBox{
		position: absolute;
		top: 40%;
		left: 50%;
		right: 50%;
		bottom: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		margin: 0 auto;
	}
	
	.loginImg{
		width: 100%;
		position: relative;
		height: 593rpx;
	}
	
	.tabsBox{
		position: absolute;
		top: 0;
		padding: 40rpx;
		width: 89%;
	}
	
	.tabs {
	  display: flex;
	}
	 
	.tab-item {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-bottom: 1px solid #fff;
	  padding: 10px 0;
	  cursor: pointer;
	  font-size: 28rpx;
	}
	 
	.tab-item.active {
	  border-color: #05bdfd;
	  color: #05bdfd;
	}
	
	.content {
	  margin-top: 10px;
	}
	
	.userLogin input{
		padding: 10rpx;
		border-bottom: 1px solid #e5e5e5;
		margin: 30rpx 0;
		font-size: 26rpx;
	}
	
	.custom-placeholder {
		font-size: 25rpx;
	}
	
	.login{
		background-color: #05bdfd;
		font-size: 30rpx;
		color: #fff;
	}
	
	.register{
		font-size: 26rpx;
		color: red;
		margin-bottom: 30rpx;
		text-align: right;
	}
	
	.code{
		display: flex;
	}
	
	.codeInput{
		width: 76%;
	}
	
	.code text{
		font-size: 24rpx;
		line-height: 122rpx;
		color: #05bdfd;
	}
	
	.wyyd{
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}
	
	.wyyd text{
		color: #05bdfd;
	}
</style>